<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 20:30:46
 -->
<template>
  <div class="app-container">
    <Tab
      v-model="searchData.tab"
      @on-date-change="onDateChange"
      @on-click="onTabClick"
    >
      <div class="fr">
        <el-button type="default" @click="btnExport">导出</el-button>
      </div>
    </Tab>
    <div>
      <el-card shadow="never" class="oper-btn-card">
        <div class="border-gay bg-gay clearfix">
          <el-row class="report-statistics">
            <el-col :span="4" class="border-l-gay">
              <p>
                <span>销售笔数</span><br>
                <i v-if="isShowLoading(statisticsInfo.billCount)" class="el-icon-loading" />
                <b v-if="!isShowLoading(statisticsInfo.billCount)">{{ statisticsInfo.billCount || 0 }}</b>
              </p>
            </el-col>
            <el-col :span="4" class="border-l-gay">
              <p>
                <span>销售额</span><br>
                <i v-if="isShowLoading(statisticsInfo.amountPayable)" class="el-icon-loading" />
                <b v-if="!isShowLoading(statisticsInfo.amountPayable)" class="color-red">{{ statisticsInfo.amountPayable|| 0 }}</b>
              </p>
            </el-col>
            <el-col :span="4" class="border-l-gay">
              <p>
                <span>毛利</span><br>
                <i v-if="isShowLoading()" class="el-icon-loading" />
                <b v-if="!isShowLoading()" class="color-red">{{ statisticsInfo.grossProfit|| 0 }}</b>
              </p>
            </el-col>
            <el-col :span="8" style="text-align: left">
              <p style="padding-left:20px;">
                <span>销售冠军：
                  <i v-if="isShowLoading()" class="el-icon-loading" />
                  <span v-if="!isShowLoading()">{{ statisticsInfo.handUserName | name }}</span>
                </span><br>
                <span>销冠销售额：
                  <i v-if="isShowLoading()" class="el-icon-loading" />
                  <span v-if="!isShowLoading()">{{ statisticsInfo.userAmountPayable | name }}</span>
                </span><br>
              </p>
            </el-col>
          </el-row>
        </div>
        <div class="clearfix font12 paddingTb20">
          <div class="fl">
            <slot />
          </div>
          <div class="fr">
            <el-checkbox
              v-model="searchData.isShowZero"
              true-label="0"
              false-label="1"
              border
              type="primary"
            >
              不显示零销售员工（或导购）
            </el-checkbox>
            <el-input
              v-model="searchData.keywords"
              class="w200"
              clearable
              placeholder="按姓名,登录账号查询"
              @keydown.enter.native="btnSearch"
            />
            <el-button type="primary" :loading="btnLoading.search" @click="btnSearchData">
              查询
            </el-button>
          </div>
        </div>
        <vxe-grid
          ref="table"
          class="grid"
          border
          resizable
          highlight-hover-row
          :loading="tableLoading.report"
          :columns="columnsData"
          :data="tableData.report"
        />
        <div class="pagination-container">
          <el-pagination
            background
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="pageInfo.rows"
            :page-sizes="[20,30,40]"
            :current-page.sync="pageInfo.page"
            :total="pageInfo.total"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listPerformance, getStatisticsInfo } from '@/api/report/report-fin.js'
import Affix from '@/components/Affix'
import Tab from '@/views/components/Tab'
import { getMoreButton } from '@/components/Table/oper-btns.js'
import { getGrossProfitPerMethod, grossProfitProportionMethod,
  grossReturnPerMethod, getSaleProportionMethod } from './compute.js'
import { getGrossProfitProportion, getGrossProfit } from './header-vnode'

export default {
  name: 'ReportPerformance',
  filters: {
    'name': function(val) {
      if (!val) return '无'
      return val
    }
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, Tab },
  mixins: [oftenuse],
  data() {
    return {
      isShowReport: false,
      searchData: { tab: 1, isShowZero: '0' },
      statisticsInfo: {},
      columnsData: [
        { title: '序号', width: 60, fixed: 'left', align: 'center',
          slots: {
            default: (params) => {
              const { seq } = params
              const value = seq
              return [<span>{value}</span>]
            }
          }
        },
        { title: '操作', width: 80, fixed: 'left',
          slots: {
            default: (params) => {
              const h = this.$createElement
              const moreButtonNode = getMoreButton(h, { props: { type: 'default' },
                on: { click: (row) => { this.btnMore(params) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [moreButtonNode])
              return [divNode]
            }
          }
        },
        { field: 'realName', title: '姓名', width: 120, fixed: 'left' },
        { field: 'username', title: '登录账号', width: 120, fixed: 'left', showOverflow: true },
        { field: 'billCount', title: '销售笔数', width: 80, showOverflow: true },
        { field: 'amountPayable', title: '销售额', align: 'right', width: 150 },
        { field: 'amountPayable', title: '销售开单金额', align: 'right', width: 150 },
        { field: 'saleProportion', title: '销售额比重', align: 'right', width: 120,
          slots: {
            default: ({ row }) => {
              const value = getSaleProportionMethod.bind(this, row)()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'grossProfit', title: '销售毛利', align: 'right', width: 120,
          slots: {
            default: ({ row }) => {
              const { amountPayable, costPriceTotal } = row
              const value = this.$amount(amountPayable).subtract(costPriceTotal).format()
              return [<span>{value}</span>]
            },
            header: ({ column }) => {
              return getGrossProfit.bind(this)()
            }
          }
        },
        { field: 'amountDiscount', title: '折扣额', align: 'right', width: 120 },
        { field: 'returnAmountPayable', title: '退货额', align: 'right', width: 120 },
        { field: 'returnPer', title: '退货率', align: 'right', width: 120,
          slots: {
            default: ({ row }) => {
              const value = grossReturnPerMethod.bind(this, row)()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'grossProfitPer', title: '毛利率', align: 'right', width: 120,
          slots: {
            default: ({ row }) => {
              const value = getGrossProfitPerMethod.bind(this, row)()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'grossProfitProportion', title: '毛利比重', align: 'right', width: 120,
          slots: {
            default: ({ row }) => {
              const value = grossProfitProportionMethod.bind(this, row)()
              return [<span>{value}</span>]
            },
            header: ({ column }) => {
              return getGrossProfitProportion.bind(this)()
            }
          }
        }
      ],
      statisticsLoading: false
    }
  },
  watch: {
    'searchData.beginTime': {
      handler(val) {
        this.getStatisticsInfo()
      }
    },
    'searchData.isShowZero': {
      handler() {
        this.listData()
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnSearchData() {
      this.setTableLoading('search', true)
      this.listData().then(_ => {
        this.setTableLoading('search', false)
      })
    },
    btnExport() {
    },
    // api
    initData() {
      this.getStatisticsInfo()
    },
    getStatisticsInfo(params = this.searchData) {
      this.statisticsLoading = true
      getStatisticsInfo(params).then(res => {
        this.statisticsLoading = false
        if (res.data.flag) {
          const data = res.data.data
          const { amountPayable, priceCostTotal } = data
          const grossProfit = this.$amount(amountPayable).subtract(priceCostTotal).format()
          data.grossProfit = grossProfit
          this.statisticsInfo = data
          this.listData()
        }
      })
    },
    listData(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('report', true)
      return listPerformance(params).then(res => {
        this.setTableLoading('report', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('report', records)
        this.pageInfo.total = total
      })
    },
    isShowLoading(val) {
      return this.statisticsLoading
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
    },
    onDateChange(data) {
      this.$set(this.searchData, 'beginTime', data.beginTime)
      this.$set(this.searchData, 'endTime', data.endTime)
    },
    onTabClick(val) {
    }
  }
}
</script>
<style scoped>
</style>
